body > section#wrapper {

  &::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: $settingsMenuWidth;
    height: calc(100% + 20px);
    background: $settingsMenuBackground;
  }

  > aside {
    position: relative;
    width: $settingsMenuWidth;
    height: calc(100vh - #{$settingsHeaderHeight} - 60px);
    margin-top: 60px;
    overflow-y: auto;

    > nav {
      height: 100%;

      li.hidden {
        display: none;
      }

      > ul {
        display: flex;
        flex-direction: column;
        height: 100%;

        > li {

          &[data-name='dashboard'] > a {
            @include mask('settings/icon-dashboard', $textColorLight, 20px);
          }

          &[data-name='sidebar'] > a {
            @include mask('icon-settings', $textColorLight, 20px);
          }

          &[data-name='appearance'] > a {
            @include mask('settings/icon-appearance', $textColorLight, 20px);
          }

          &[data-name='newtab'] > a {
            @include mask('settings/icon-newtab', $textColorLight, 16px);
          }

          &[data-name='support'] > a {
            @include mask('settings/icon-support', $textColorLight, 22px);
          }

          &[data-name='premium'] {

            > a {
              @include mask('icon-premium', $textColorLight, 18px);

              &::before {
                z-index: 2;
              }
            }

            &.inactive > a {

              &::after {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: 15px;
                margin: auto;
                width: 31px;
                height: 31px;
                border-radius: 50%;
                background: rgba($colorNotice, 0.8);
                transition: background 0.5s;
                z-index: 1;
              }

              &::before {
                background-color: $settingsMenuBackground;
              }
            }
          }

          &[data-name='infos'] > a {
            @include mask('icon-info', $textColorLight, 20px);
          }

          &[data-name='language'] {

            > a {
              @include mask('settings/icon-translate', $textColorLight, 20px);
            }

            &.incomplete > a > span {
              @include mask('icon-info', rgba($colorError, 0.8), 16px);
              display: inline-block;
              position: relative;
              width: 24px;
              height: 24px;
              margin: 10px 0 0 5px;
              vertical-align: top;
              cursor: help;
            }
          }

          &[data-name='export'] {
            margin-top: auto;

            > a {
              @include mask('settings/icon-importExport', $textColorLight, 22px);
            }
          }

          &[data-name='expert'] {
            font-size: 90%;
            background: $settingsMenuHoverBackground;
            margin-top: 16px;
            line-height: 32px;

            &.active::after {
              top: 6px;
            }

            > a {
              padding-left: 32px;

              &::after {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: 10px;
                width: 6px;
                height: 6px;
                margin: auto;
                border-top: 2px solid $textColorLight;
                border-right: 2px solid $textColorLight;
                transform: rotateZ(45deg);
              }
            }
          }

          &.active {

            &::after {
              content: "";
              position: absolute;
              top: 12px;
              right: 0;
              width: 0;
              height: 0;
              border: 10px solid transparent;
              border-right-color: $bodyBackground;
            }

            > a {
              background: $settingsMenuHoverBackground;

              &::before {
                background-color: $textColorLight2;
              }
            }
          }
        }
      }

      ul {

        > li {
          position: relative;
          display: block;
          line-height: 44px;

          > a {
            position: relative;
            display: block;
            width: 100%;
            padding: 0 10px 0 52px;
            color: $textColorLight;
            transition: background 0.5s;

            &:hover {
              background: $settingsMenuHoverBackground;
            }

            &::before {
              width: 32px !important;
              left: 22px !important;
              -webkit-mask-position: left center !important;
              pointer-events: none;
            }
          }

          &.active {

            > a {
              font-weight: $__fontWeightMedium;
              color: $textColorLight2;
            }
          }

          > ul {
            margin-left: 30px;
            height: 0;
            transition: height 0.3s;
            overflow: hidden;

            > li {
              line-height: 30px;

              > a {
                padding: 0 10px 0 22px;
                font-size: 90%;

                &::before {
                  content: "-";
                  position: absolute;
                  left: 12px !important;
                }

                &::after {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

@import "../../rtl/include/settings/menu";


